<template>
  <div class="cardWrapper" :id="'menuScroll0-'+workEnviromentIndex">
    <div class="cardTitleContainer">
      <img src="https://img3.job1001.com/data_center/images/position_item_icon.png" alt="Icon"
        class="position_item_icon" />
      <div class="cardTitle">{{ '工作环境' }}</div>
    </div>
    <workHoursAndIntensity :isSuperToken="isSuperToken" :positionItemList="workEnviromentData"
      :workEnviromentIndex="workEnviromentIndex" />

    <workPlaceAndGuard :isSuperToken="isSuperToken" :positionItemList="workEnviromentData"
      :workEnviromentIndex="workEnviromentIndex" />
  </div>
</template>

<script>
import workHoursAndIntensity from "./components/workHoursAndIntensity.vue";
import workPlaceAndGuard from "./components/workPlaceAndGuard.vue";
export default {
  name: "careerOverview",
  props: {
    workEnviromentData: {
      type: Array,
      default: () => [],
    },
    workEnviromentIndex: {
      type: Number || String,
      default: 1,
    },
  },
  data() {
    return {
      positionId: "",
      positionName: "",
      secondLayerIds: [],
      specialHidden: false,
      isSuperToken: false,
    };
  },
  created() {
    this.positionId = this.$route.query.id;
    this.positionName = this.$route.query.name;
  },
  mounted() {
    this.isSuperToken =
      localStorage.getItem("superToken") ==
        "407404EAEC845F1B91A104B80FE86D89" ||
      localStorage.getItem("superToken") == "5FD271D8A0AA315DD218801C0C3A0DEA";
    if (
      this.$route.query.superToken == "407404EAEC845F1B91A104B80FE86D89" ||
      this.$route.query.superToken == "5FD271D8A0AA315DD218801C0C3A0DEA"
    ) {
      this.specialHidden = false;
    }
  },
  components: {
    workHoursAndIntensity,
    workPlaceAndGuard,
  },
};
</script>

<style lang="scss" scoped>
.cardWrapper {
  position: relative;
  min-width: 800px;
  border-radius: 10px;
  border: 1px solid #cbdcfe;
  background-size: 110% 219px;
  background-position: -10px -10px;
  background-image: url("https://img3.job1001.com/data_center/images/salary_bg.png");
  background-repeat: no-repeat;
  padding: 20px;
  flex: 1;

  margin-bottom: 14px;
  &::-webkit-scrollbar {
    width: 4px;
    background-color: #fff;
    border-radius: 4px;

    height: 4px;
  }
  &::-webkit-scrollbar-thumb {
    background-color: #d8d8d8;
    border-radius: 4px;
  }
  .cardTitleContainer {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    // position: sticky;
    // top: 0;
    .cardTitle {
      height: 30px;
      font-size: 22px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 600;
      color: #000000;
      line-height: 30px;
      margin-right: 15px;
    }
    .introduceJobInput {
      width: 400px;
    }
    .introduceJob {
      height: 21px;
      font-size: 15px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      line-height: 21px;
      margin-right: 38px;
    }
    .position_item_icon {
      width: 39px;
      height: 40px;
      margin-right: 13px;
    }
  }

  .item {
    margin-bottom: 10px;
  }
}
</style>